# COUNTDOWN VIEW
# -----------------------------------------------------------------------------
# This is the countdown view.

class CountdownChristmasView extends window.App.BaseView

    # Init the view.
    init: =>
        @setDom ["#cdTitle", "#cdTimer", "#cdOnEndMessage", "#sound"]
        @setEvents()

    # Bind events to DOM elements.
    setEvents: =>
        @dom.cdTimer.countdown {callback: @onFinish}

    # When countdown has finished, send a notification to the server and update
    # the view to show the `onEndMessage`.
    onFinish: =>
        url = @dom.cdOnEndMessage.text().replace "http://", ""

        # Play sound if `playSound` is true.
        if @dom.sound?.length > 0
            @dom.sound.trigger "play"
            if App.Settings.General.debug
                console.log "CountdownView.onFinish", "Play sound."

        # If message is an YouTube URL, then embed an iframe with the video.
        if url.indexOf("youtube.com/") is 0 or url.indexOf("youtu.be/") is 0
            @embedYouTube url
        # If message is a Vimeo URL, embed an iframe with the video.
        else if url.indexOf("vimeo.com/") is 0
            @embedVimeo url
        # No YouTube video, only show the message.
        else
            @dom.cdOnEndMessage.fadeIn App.Settings.UI.fadeInterval
            if App.Settings.General.debug
                console.log "CountdownView.onFinish", "Show message: #{@dom.cdOnEndMessage.text()}"

    # Embed the YouTube video set on the `onEndMessage`.
    embedYouTube: (url) =>
        videoId = url
        videoId = videoId.replace "www.", ""
        videoId = videoId.replace "youtube.com", ""
        videoId = videoId.replace "youtu.be", ""
        videoId = videoId.replace "watch?v=", ""
        videoId = videoId.replace "/", ""
        src = "http://www.youtube.com/embed/#{videoId}?rel=0&autoplay=1"

        # Create YouTube iframe and append after the countdown's title.
        iframe = $(document.createElement "iframe")
        iframe.attr "scrolling", "no"
        iframe.attr "width", 640
        iframe.attr "height", 360
        iframe.attr "frameborder", 0
        iframe.attr "src", src
        @appendMedia iframe

        if App.Settings.General.debug
            console.log "CountdownView.embedYouTube", src

    # Embed the Vimeo video set on the `onEndMessage`.
    embedVimeo: (url) =>
        videoId = url
        videoId = videoId.replace "www.", ""
        videoId = videoId.replace "vimeo.com", ""
        videoId = videoId.replace "/", ""
        src = "http://player.vimeo.com/video/#{videoId}?autoplay=1"

        # Create Vimeo iframe and append after the countdown's title.
        iframe = $(document.createElement "iframe")
        iframe.attr "scrolling", "no"
        iframe.attr "width", 640
        iframe.attr "height", 360
        iframe.attr "frameborder", 0
        iframe.attr "src", src
        @appendMedia iframe

        if App.Settings.General.debug
            console.log "CountdownView.embedVimeo", src

    # Embed a media element (video from YouTube or Vimeo, music from SoundCloud, etc...)
    # on the page right after the countdown's title.
    appendMedia: (obj) =>
        @dom.cdTimer.fadeOut App.Settings.UI.fadeInterval, => @dom.cdTitle.after obj


# APPEND VIEW TO WINDOW
# -----------------------------------------------------------------------------
window.App.currentView = new CountdownChristmasView()